<template>
  <div class="facility">
    <van-sticky>
      <van-nav-bar :title="$route.meta.title" left-arrow @click-left="onClickLeft" style="width:100%;" />
    </van-sticky>
    <van-cell-group v-for="(n,index) in facility" :key="index" :border="false">
      <van-swipe-cell :before-close="beforeClose">
        <van-card :desc="n.remark" :price="n.price" :title="n.devicename" :thumb="img + n.img||require('@/assets/def.png')" @click="toDetail(n.id)" />
        <template #right>
          <van-button square text="删除" type="danger" class="delete-button" @click="getId(n.id)" />
        </template>
      </van-swipe-cell>
    </van-cell-group>
    <van-empty description="暂无设备" v-if="facility.length==0" />
    <div class="facility-push" @click="addFacility()" v-if="utype==0">
      <van-popover v-model="showPopover" :actions="actions" placement="top-end" @select="onSelect">
        <template #reference>
          <van-icon name="plus" size="0.6rem" color="#fff" />
        </template>
      </van-popover>
    </div>
  </div>
</template>

<script>
import { Dialog, Toast } from 'vant'
export default {
  name: 'Facility',
  data () {
    return {
      id: '',
      utype: '',
      showPopover: false,
      actions: [{ text: '点我添加设备' }],
      facility: []
    }
  },
  methods: {
    onClickLeft () {
      if (this.utype == 0) {
        this.$router.push({ path: '/controls' })
      } else {
        this.$router.push({ path: '/my' })
      }
    },
    toDetail (id) {
      this.$router.push({ path: '/facilitydetail', query: { id: id } })
    },
    addFacility () {
      this.$router.push({ path: '/addfacility' })
    },
    onSelect () {
      setTimeout(() => {
        this.showPopover = true
      }, 500);
    },
    getId (id) {
      this.id = id
    },
    getFacilityList () {
      this.$axios('/index/deviceslist', {
        type: 2
      })
        .then(res => {
          if (res.data.code == 1) {
            this.facility = res.data.data.map(v => {
              return {
                ...v,
                img: v.imageurl.split(',')[0]
              }
            })
          } else {
            Toast.fail(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err);
        })
    },
    // 删除设备
    beforeClose ({ position, instance }) {
      switch (position) {
        case 'left':
        case 'cell':
        case 'outside':
          instance.close();
          break;
        case 'right':
          Dialog.confirm({
            message: '确定删除吗？',
          })
            .then(() => {
              this.$axios('/index/deldevices', {
                id: this.id
              })
                .then(res => {
                  if (res.data.code == 1) {
                    Toast.success('删除成功')
                    setTimeout(() => {
                      // 异步刷新
                      this.getFacilityList()
                    }, 500);
                  } else {
                    Toast.fail(res.data.msg)
                  }
                })
            })
            .catch(() => {
              // on cancel
              instance.close();
            });
          break;
      }
    },
  },
  created () {
    this.utype = JSON.parse(localStorage.getItem("userInfo")).user.utype
    this.onSelect()
    this.getFacilityList()
    setTimeout(() => {
      this.showPopover = false
    }, 5000);
  },
}
</script>

<style lang="less" scoped>
.facility {
  /deep/ .van-card {
    background-color: #fff;
  }
  /deep/ .van-card__title {
    font-weight: bold;
    padding-bottom: 10px;
    font-size: 30px;
  }
  /deep/ .van-card__price {
    font-weight: bold;
    color: red;
  }
  &-push {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    right: 50px;
    bottom: 100px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #1bb89c;
  }
  .delete-button {
    height: 100%;
  }
}
</style>